<template>
    <div class="root-lay">
        <el-breadcrumb
            class="head-path-lay"
            separator-class="el-icon-arrow-right"
        >
            <el-breadcrumb-item v-for="(item, index) in pathStack" :key="index">
                <span
                    :class="
                        index == pathStack.length - 1
                            ? 'path-item last-item'
                            : 'path-item'
                    "
                    >{{ item.name }}</span
                >
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="opt-lay">
            <div class="enter-group">
                <img class="icon-btn" src="@/assets/img/icon_back_14.png" />
                <img class="icon-btn" src="@/assets/img/icon_refresh.png" />

                <div class="search-view">
                    <img
                        class="search-icon"
                        src="@/assets/img/icon_nav_search.png"
                    />

                    <el-input
                        :placeholder="
                            $t('message.smartPidPage.docSearchHoldStr')
                        "
                        class="search-input"
                    ></el-input>
                </div>
            </div>

            <div class="enter-group">
                <button class="black-btn" @click="centerDialogVisible = true">
                    <i class="iconfont">&#xe825;</i>
                    <span>{{ $t("message.public.uploaded") }}</span>
                </button>

                <button class="black-btn" @click="newProjectDialogFlag = true">
                    <i class="iconfont">&#xe826;</i>
                    <span>{{ $t("message.homePageTable.newProject") }}</span>
                </button>
                <i class="el-icon-delete-solid" @click="tableDataDelete()"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pathStack: [
                {
                    name: "首页",
                },
                {
                    name: "首页",
                },
                {
                    name: "首页",
                },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
.root-lay {
    width: calc(100% - 192px);
    height: 100%;
}

.head-path-lay {
    margin-top: 16px;

    .path-item {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
    }

    .last-item {
        font-size: 14px;
        font-weight: 700;
        color: #213d49;
        line-height: 22px;
    }
}

.opt-lay {
    width: 100%;
    padding: 16px 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .enter-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        .icon-btn {
            width: 24px;
            height: 24px;
            margin-right: 33px;
        }

        .black-btn {
            padding: 0 8px;
            height: 32px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            // background: #213d49;
            border-radius: 4px;
            font-weight: 500;
            margin: 0 8px;
            border: 1px solid #d9d9d9;
            span {
                margin: 0 0 0 8px;
            }
        }

        .el-icon-delete-solid {
            font-size: 24px;
            // color: rgba(144, 147, 153, 1);
            margin: 0 20px;
            cursor: pointer;
        }

        .search-view {
            width: 250px;
            display: flex;
            flex-direction: row;
            align-items: center;

            .search-icon {
                width: 16px;
                height: 16px;
                margin-right: 11px;
            }

            .search-input {
                width: 300px;
                background-color: rgba(0, 0, 0, 0);
                // border: 0px solid #e1e1e1;

                ::v-deep .el-input__inner {
                    background: rgba(0, 0, 0, 0);
                    border: 0;
                    font-size: 16px;
                    border-bottom: 2px solid #e1e1e1;
                    //     padding: 0;
                }
            }
        }
    }
}
</style>